<template>
 <div class="top">
     <nav1></nav1>
      <div class="songlist">
      
      <div class="song">
          <div class="left">
              <img :src="tab.pic" alt="">
          </div>
          <div class="right">
              <h1>{{tab.name}}</h1>
              <h2>{{tab.info}}</h2>
              <p>{{tab.tag}}</p>
              <!-- <p>{{tab.user_name}}</p>
             <img :src="tab.user_pic" alt="" class="user"> -->
              <div class="bottom">
                  <span></span>
                  <span></span>
              </div>
          </div>
          
      </div>
      <div class="list">
        
              <ul>
                  <li v-for="(item,index) in tab.musicList" :key="index" @click="music(item.id,item.pic,item.artist_name,item.name)">
                  <p> {{index+1}}</p> 
                 
                  <p class="p1">{{item.name}}</p>
                   <p>{{item.artist_name}}</p>

                   <i class="fa fa-cloud-download"></i>
                  </li>
              </ul>
          </div>
  </div>
 </div>
</template>

<script>
import nav1 from '../../components/nav'
export default {
    components:{
        nav1
    },
    data(){
        return {
            tab:[]
        }
    },
    methods:{
       getsong(){
           var id=this.$route.query.sheet
           var id1=this.$route.query.id
            this.axios.get(`https://m.kuwo.cn/newh5app/api/mobile/v1/music/playlist/${id||id1}?rn=100&ua=&ip=`)
            .then(res=>{
                console.log(res.data.data);
                this.tab=res.data.data
            }).catch(err=>{
                console.log(err);
            })
        },
        music(i,j,n,s){
            this.$router.push({
                path:'/music',
                query:{
                    id:i,
                    pic:j,
                    name:n,
                    songname:s

                }
            })
            console.log(j);
        }
    },
    created(){
        this.getsong()
    }

}
</script>
<style lang="scss" scoped>
.songlist{
    width: 1000px;
    margin: 0 auto;
    .song{
        width: 1000px;
        margin-top: 150px;
        display: flex;
        .user{
            width: 30px;
            height: 30px;
        }
        img{
            width: 250px;
            height: 250px;
        }
        .right{
            margin-left: 10px;
            h1{
                margin-bottom: 20px;
            }
            h2{
                margin-bottom: 20px;
            }
        }
    }
    .list{
        width: 1000px;
        margin: 0 auto;
        ul{
            li{
              
                display: flex;
                font-size: 18px;
                justify-content: space-between;
                margin-top: 30px;
            
                p{
                    width: 200px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .p1{
                    margin-left: -200px;
                }
            }
        }
    }
}
</style>